<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所有品牌</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="获取所有品牌" onclick="getAllBrand()">
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>

    <tr align="center">
        <td>1</td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
        <td>100</td>
        <td>三只松鼠，好吃不上火</td>
        <td>启用</td>
        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
        <td>2</td>
        <td>优衣库</td>
        <td>优衣库</td>
        <td>10</td>
        <td>优衣库，服适人生</td>
        <td>禁用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
        <td>3</td>
        <td>小米</td>
        <td>小米科技有限公司</td>
        <td>1000</td>
        <td>为发烧而生</td>
        <td>启用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>
</table>

<script>
    // 页面加载完毕后执行
    window.onload = function () {
        getAllBrand();
    };

    // 按钮点击事件
    function getAllBrand() {
        axios.get("http://localhost:8080/ajax-brand-demo/selectAllServlet")
            .then(function (resp) {
                // alert(resp.data);

                // 拼接表格中的数据 = 表头+每一行数据
                // 表头
                let tableData = `<tr>
                                    <th>序号</th>
                                    <th>品牌名称</th>
                                    <th>企业名称</th>
                                    <th>排序</th>
                                    <th>品牌介绍</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>`;

                // 遍历数组,获取每个对象
                for (let brand of resp.data) {
                    tableData += `<tr align="center">
                                        <td>${brand.id}</td>
                                        <td>${brand.brandName}</td>
                                        <td>${brand.companyName}</td>
                                        <td>${brand.ordered}</td>
                                        <td>${brand.description}</td>
                                        <td>${brand.status}</td>
                                        <td><a href="#">修改</a> <a href="#">删除</a></td>
                                    </tr>`;
                }

                // 把tableData准备好的数据放到table标签中
                document.getElementById("brandTable").innerHTML = tableData;
            });
    }
</script>
</body>
</html>